/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-if="user">
		<form @submit="formSubmit">
			<view class="container user-container">
				<!-- 修改昵称 -->
				<view class="label-input item" v-if="type=='nickname'">
					<text class="label">
						昵称
					</text>
					<input class="input" @input="setName" name="nickname" :value="user.nickname" placeholder="请输入您的昵称"></input>
				</view>
				<!-- 修改性别 -->
				<view v-if="type=='sex'">
					<view class="gender-box">
						<view @tap="changeGender" class="gender boy" :class="[user.sex==1?'boy-click':'']" data-gender="boy" :style="'background:url('+bagImg+')'"></view>
					</view>
					<view class="gender-box">
						<view @tap="changeGender" class="gender girl " :class="[user.sex==2?'girl-click':'']" data-gender="girl" :style="'background:url('+bagImg+')'"></view>
					</view>
				</view>
				<!-- 修改手机号 -->
				<block v-if="type=='mobile'">
					<view class="label-input item">
						<text class="label">
							手机号
						</text>
						<input  class="input" data-name="mobile" name="mobile" placeholder="请输入您的手机号" type="number"
						 v-model="user.mobile"></input>
					</view>
					<!-- 修改手机号 -->
					<view class="verify-box item" v-if="config.sms_bind_mobile_sms_enable==1">
						<input class="verify-input" name="mobile_code" v-model="code" placeholder="请输入验证码">
						</input>
						<button class="verify-btn  " :class="[canGetCode?'btn-disable':'']" v-if="!is_send" @tap="getCode">获取短信验证码</button>
						<button class="verify-btn countDownNum " :class="[canGetCode?'btn-disable':'']" v-if="is_send">倒计时{{countDownNum}}秒</button>
					</view>
				</block>
				<!-- 修改邮箱 -->
				<view class="label-input item" v-if="type=='email'">
					<text class="label">
						邮箱
					</text>
					<input class="input" @input="setEmail" name="email" placeholder="请输入您的邮箱" :value="userInfo.email">

					</input>
				</view>
				<!-- 修改密码 -->
				<block v-if="type=='password'">
					<view class="label-input simple item" v-if="isShowForget&&config.sms_forget_pwd_sms_enable==1">
						<text class="label">手机号</text>
						<input class="input" placeholder="请输入您的手机号" v-model="userInfo.mobile" name="paypwd_mobile" auto-focus/>
				    </view>
					<view class="verify-box item" v-if="isShowForget&&config.sms_forget_pwd_sms_enable==1">
						<input class="verify-input" placeholder="请输入验证码" v-model="code" name="password_code" />
						<button class="verify-btn  " :class="[canGetCode?'btn-disable':'']" v-if="!is_send" @tap="getCode">获取短信验证码</button>
						<button class="verify-btn countDownNum " :class="[canGetCode?'btn-disable':'']" v-if="is_send">倒计时{{countDownNum}}秒</button>
					</view>
					<view class="label-input simple" v-if="!isShowForget">
						<text class="label">
							原密码
						</text>
						<input class="input" @input="oldPassword" password name="old_password" placeholder="原密码">

						</input>
					</view>
					<view class="label-input simple">
						<text class="label">
							新密码
						</text>
						<input class="input" @input="newPassword" password name="new_password" placeholder="新密码">

						</input>
					</view>
					<view class="label-input simple item" style="border-radius: 5px;">
						<text class="label">
							确认密码
						</text>
						<input class="input" @input="confirmPassword" password name="confirm_password" placeholder="确认密码">

						</input>
					</view>
				</block>
				<!-- 修改支付密码 -->
				<block v-if="type=='paypwd'">
					<view class="label-input simple item" v-if="config.sms_regis_sms_enable==1">
						<text class="label">手机号</text>
						<input class="input" placeholder="请输入您的手机号" v-model="userInfo.mobile" name="paypwd_mobile"  auto-focus/>
				    </view>
					<view class="verify-box item" v-if="config.sms_regis_sms_enable==1">
						<input class="verify-input" placeholder="请输入验证码" v-model="code" name="password_code" />
						<button class="verify-btn  " :class="[canGetCode?'btn-disable':'']" v-if="!is_send" @tap="getCode">获取短信验证码</button>
						<button class="verify-btn countDownNum " :class="[canGetCode?'btn-disable':'']" v-if="is_send">倒计时{{countDownNum}}秒</button>
					</view>
					<view class="label-input simple">
						<text class="label">
							新密码
						</text>
						<input class="input" @input="newPassword" password name="new_password" placeholder="新密码">
						</input>
					</view>
					<view class="label-input simple item" style="border-radius: 5px;">
						<text class="label">
							确认密码
						</text>
						<input class="input" @input="confirmPassword" password name="confirm_password" placeholder="确认密码">
				
						</input>
					</view>
				</block>
				<button class="submit" form-type="submit" role="button" aria-disabled="false">确认修改</button>
				 <view class='forget_password' v-if="!isShowForget&&config.sms_forget_pwd_sms_enable==1" @tap='changeForgetPassword'>忘记密码？</view>
			</view>
		</form>
	</view>

	
</template>

<script>
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import Md from "md5";
	import passwordMixin from "@/mixin/forgotPassword.js";
	import {
		putUser,
		getUserInfo,
		putPassword,
		sendSms,
		validationSms,
		putMobile,
	} from "@/api/api.js";
	import {mapState,mapActions} from "vuex";
	export default {
		data() {
			return {
				hostUrl: config.host, //路径前缀
				imgUrl:config.imgUrl,
				bagImg: config.imgUrl+'user/bag.png',
				nickname: "",
				old_password:"",//老密码
				new_password:"",//新密码
				confirm_password:"",//确认密码
				passwordData:{},//密码
				// countDownNum:"",//倒计时
				is_send:false,//是否发送短信
				canGetCode:false,//获取短信验证码
				sms_sms_time_out:0,//短信验证码有效时间
				timer:null,//定时器
				code:"",//验证码
				userInfo:"",
				scene:1,//1用户注册 2找回密码  3客户下单 4客户支付 5商家发货 6身份验证 验证码登录
				type: "",
				isShowForget: true ,//是否显示忘记密码按钮
				typeActice: [{
						type: "nickname",
						msg: "修改昵称"
					},
					{
						type: "sex",
						msg: "修改性别"
					},
					{
						type: "mobile",
						msg: "修改手机"
					},
					{
						type: "email",
						msg: "修改邮箱"
					},
					{
						type: "password",
						msg: "修改密码"
					},
					{
						type: "paypwd",
						msg: "修改支付密码"
					},
				]
			};
		},
		mixins: [passwordMixin],
		computed: {
			...mapState(['hasLogin','user','config']),
			countDownNum:{
				
				get:function(){
					return this.sms_sms_time_out
				},
				set:function(val){
					this.sms_sms_time_out=val;
					
				}
				
			}
		},
		onLoad(options) {
			this.userInfo=this.user
			this.sms_sms_time_out=this.config.sms_sms_time_out;
			this.type = options.type
			console.log(this.type)
			this.typeActice.forEach((i, index) => {
				if (options.type == i.type) {
					uni.setNavigationBarTitle({
						title: i.msg,
						success:function(res){
							console.log(res)
						}
					});
					console.log(i.msg)
					/*修改密码的时候显示忘记密码*/
					if(options.type=="password"){
						this.isShowForget=!this.isShowForget
					}
				}
			})
			if(this.hasLogin){
				
			}
		},

		methods: {
			...mapActions(['getUser']),
			/*修改昵称*/
			setName(e) {

				this.nickname = e.detail.value

			},
			/*修改邮箱*/
			setEmail(e) {
				
				this.userInfo.email = e.detail.value
			},
			/*老密码*/
			oldPassword(e){
				this.old_password=e.detail.value;
			},
			confirmPassword(e){
				this.confirm_password=e.detail.value;
			},
			/*新密码*/
			newPassword(e){
				this.new_password=e.detail.value;
			},
			
			
			/*修改性别*/
			changeGender(e) {
				let sex = e.currentTarget.dataset.gender
				console.log(sex)
				if (sex == "boy") {
					this.user.sex = 1;
				} else if (sex == "girl") {
					this.user.sex = 2;
				}
				console.log(this.user)

			},
			// 修改用户信息
			putUser(params) {
				putUser(params).then(res => {
					if (res.status==1) {
						common.toast("none", "修改成功", 2000, true)
					}
					console.log(res)
				})
			},
			/*修改密码*/
			putPassword(params){
				putPassword(params).then(res=>{
					console.log(res)
					if (res.status!=1) {
						common.toast("none",res.msg, 2000)
						return
					}
					common.toast("none", "修改成功", 2000, true)	
				}).then(()=>{
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			},
			/*提交修改昵称*/
			subnickname() {
				if (this.nickname == "") {
					common.toast("none", "昵称不能为空！", 2000)
					return
				}
				let params = {
					nickname: this.nickname
				}
				this.putUser(params)
			},
			/*提交登录密码*/
			subPassword(){
				
				if(this.isShowForget&&this.config.sms_forget_pwd_sms_enable==1){
					if(!this.code){
						common.toast("none","先获取短信验证码",2000)
						return
					}
					
				}
				if(this.new_password!=this.confirm_password){
					common.toast("none","新密码输入不一致!",2000)
					return
				}
				if(this.new_password.length<6){
					common.toast("none","密码长度不能小于6!",2000)
					return
				}
				let newPassword=Md("TPSHOP"+this.new_password)
				let oldPassword=Md("TPSHOP"+this.old_password)
				let password={
					new_pass_word:newPassword,
					old_pass_word:oldPassword
				}
				this.passwordData=password;
				if(this.isShowForget&&this.config.sms_forget_pwd_sms_enable==1){
					let params={
						mobile:this.userInfo.mobile,
						code:this.code,
						scene:this.scene
					}
					this.validationSms(params)
				}else{
				   this.putPassword(this.passwordData)
				}
				
			},
			/*提交支付密码*/
			subPaypassword(){
				if(this.config.sms_forget_pwd_sms_enable==1){
					if(!this.code){
						common.toast("none","请获取短信验证码",3000)
						return;
					}
				}
				if(this.new_password!=this.confirm_password){
					common.toast("none","新密码输入不一致!",2000)
					return
				}
				if(this.new_password.length<6){
					common.toast("none","密码长度不能小于6!",2000)
					return
				}
				if(this.config.sms_forget_pwd_sms_enable==1){
					let params={
						mobile:this.userInfo.mobile,
						code:this.code,
						scene:this.scene
					}
					this.validationSms(params)
				}else{
					common.toast("none","后台已关闭此功能",3000)
				}
			}, 
			/*提交修改性别*/
			subsex() {
				let params = {
					sex: this.user.sex
				}
				this.putUser(params)
			},
			/*提交邮箱*/
			subemail() {
				var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if (!reg.test(this.userInfo.email) && this.userInfo.email != "") {
					common.toast("none", "邮箱格式有误", 2000)
					return
				}
				if (this.userInfo.email == "") {
					common.toast("none", "邮箱不能为空!", 2000)
					return
				}

				let params = {
					email: this.userInfo.email
				}
				this.putUser(params)
			},
			/*提交*/
			formSubmit() {
				if (this.type == "nickname") {
					this.subnickname()
				}
				if (this.type == "sex") {
					this.subsex()
				}
				if (this.type == "email") {
					this.subemail()
				}
				/*手机*/ 
				if (this.type == "mobile") {
					let params={
						mobile:this.userInfo.mobile,
						code:this.code,
						scene:this.scene

					}
					if(this.config.sms_bind_mobile_sms_enable==1){
						this.validationSms(params)
					}else{
						common.toast("none","后台已关闭此功能")
						// let mobile={
						// 	mobile:this.userInfo.mobile,
						// 	// verification:this.code,
						// 	// scene:"1"
						// }
						// this.putMobile(mobile)
					}
					
					
				}
				if(this.type=="password"){
					this.subPassword()
				}
				if(this.type=="paypwd"){
					// 更新支付密码
					this.subPaypassword()
				}
			},
			/*点击忘记密码*/ 
			changeForgetPassword(){
				this.isShowForget=!this.isShowForget;
				// common.model("暂时不支持忘记密码")
				// this.isShowForget=!this.isShowForget;
				
			},
			/*获取短信验证码*/
			getCode(){
				this.switch()
				if(!this.user.mobile){
					common.toast("none","手机号不能为空!",3000)
					return
				}
				let mobile={
					mobile:this.userInfo.mobile,
					scene:this.scene
				}
				this.sendSms(mobile)
			},
			switch(){
				switch (this.type) {
					case "mobile":
						this.scene=6;
						break;
					case "password":
						this.scene=2;
						break;
					case "paypwd":
						this.scene=3;
						break;
					default:
						break;
				}
			},
			/*发送短信验证码*/ 
			sendSms(mobile){
				sendSms(mobile).then(res=>{
					console.log(res)
					if(res.status==1){
						let that=this;
						that.timer=setInterval(()=>{
							if(that.countDownNum==0){
								clearInterval(that.timer)
								that.is_send=false;
								that.countDownNum=that.config.sms_sms_time_out;
								return
							}else{
								that.countDownNum--;
							}
						},1000)
						this.is_send=true;
					}
					
				})
			},
			/*验证短信是否正确*/ 
			validationSms(params){
				validationSms(params).then(res=>{
					// console.log(res)
					if(res.status!=1){
						// common.toast("none")
						return;
					}
				}).then(()=>{
					if(this.type=="mobile"){
						let mobile={
							mobile:this.userInfo.mobile,
							verification:this.code,
							// scene:"1"
						}
						this.putMobile(mobile)
					}
					if(this.type=="password"){ // 修改密码 
						let newPassword=Md("TPSHOP"+this.new_password)
						let params={
							mobile:this.userInfo.mobile,
							verification:this.code,
							pass_word:newPassword,
						}
						this.forgotPassword(params)
					}
					if(this.type=="paypwd"){ //修改支付密码
						let newPaypwd=Md("TPSHOP"+this.new_password)
						let params={
							mobile:this.userInfo.mobile,
							paypwd:newPaypwd,
							verification:this.code

						}
						this.putPaypwd(params);
					}
				})
			},
			putMobile(mobile){ //修改手机号
				putMobile(mobile).then(res=>{
					console.log(res)
					if(res.status==1){
						this.getUser()
					}
				}).then(()=>{
					
					common.toast("none","更新手机号成功",3000)
					setTimeout(() => {
						uni.navigateTo({
							url:"/pages/user/userinfo/userinfo"
						})
					}, 3000);
				})
			}
			
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.user-container {
		padding-top: 100rpx;
	}

	.label-input {
		font-size: 28rpx;
		margin: 0 auto;
		line-height: 90rpx;
		border: 1rpx solid #f3f3f3;
		width: 710rpx;
		border-radius: 10rpx;
		background: #fff;
		box-sizing: border-box;
	}

	.label {
		box-sizing: border-box;
		float: left;
		padding: 0 25rpx;
	}

	.input {
		box-sizing: border-box;
		float: left;
		height: 90rpx;
		width: 500rpx;
		padding-right: 5rpx;
	}

	.simple {
		border: 0;
		border-radius: 0;
		border-bottom: 1rpx solid #f3f3f3;
		background: #fff;
		width: 710rpx;
	}

	.user-container .simple:first-child {
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.simple:last-of-type {
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.submit {
		width: 600rpx;
		margin: 0 75rpx;
		background-color: #e30000;
		color: white;
		line-height: 90rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.verify-box {
		font-size: 28rpx;
		width: 710rpx;
		margin: 0 auto;
		line-height: 90rpx;
		border-bottom: 1rpx solid #f3f3f3;
	}

	.verify-input {
		box-sizing: border-box;
		float: left;
		height: 90rpx;
		width: 400rpx;
		padding-left: 20rpx;
	}

	.verify-btn {
		box-sizing: border-box;
		float: right;
		margin-top: 10rpx;
		margin-right: 10rpx;
		line-height: 70rpx;
		padding: 0 10rpx;
		background-color: #ff3b3b;
		color: white;
		border-radius: 10rpx;
	}

	.btn-disable {
		background-color: grey;
	}

	.item {
		background: #fff;
	}

	.gender-box {
		width: 50%;
		float: left;
		padding: 100rpx 0 200rpx 0;
	}

	.gender {
		background-repeat: no-repeat !important;
		background-size: 4.48rem !important;
		width: 2.13333rem;
		height: 2.73067rem;
		margin: 0 auto;
	}

	.boy {
		background-position: 0 0 !important;
	}

	.girl {
		background-position: 0 -2.92267rem !important;
	}

	.boy-click {
		background-position: -2.34667rem 0 !important;
	}

	.girl-click {
		background-position: -2.368rem -2.92267rem !important;
	}

	.countDownNum {
		background-color: #999;
		width: 32%;
		text-align: center;
	}

	.forget_password {
		padding: 17rpx 0rpx 0rpx 41%;
		font-size: 28rpx;
	}

	.block {
		margin: 0 auto;
		width: 710rpx;
		height: 70rpx;
		background: #fff;
	}
</style>
